<template>
  <div class="listdata">
    <el-table :data="tData.slice((currentPage-1)*pagesize,currentPage*pagesize)" class="tableStyle" style="width: 100%;"
      :row-class-name="tableRowClassName">
      <template v-for="(col,index) in tName" :key="index">
        <el-table-column :prop="col.prop" :label="col.label"></el-table-column>
      </template>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[5, 10, 20, 40]"
      :page-size="pagesize" :current-page="currentPage" layout="total, sizes, prev, pager, next, jumper"
      :total="tData.length">
    </el-pagination>
  </div>
</template>


<script>
  import {
    exdata
  } from '@/utils/common.js';
  export default {
    data() {
      return {
        tData: [],
        currentPage: 1,
        pagesize: 10,
        tName: [{
          prop: "name",
          label: "主机名"
        },
        {
          prop: "hostip",
          label: "主机IP"
        },
        {
          prop: "netmask",
          label: "子网掩码"
        },
        {
          prop: "hostdisk",
          label: "主机磁盘"
        },
        {
          prop: "hostcpu",
          label: "主机cpu"
        },
        {
          prop: "hostmemory",
          label: "主机内存"
        },
        {
          prop: "create_date",
          label: "创建时间"
        }
        ],

      }
    },
    methods: {
      // 判断鼠标移动时候展示的颜色
      tableRowClassName({
        rowIndex
      }) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      // 获取列表展示接口数据
      async listTableData() {
        await exdata().then(res => {
          this.tData = res
        })
      },
      // 分页
      handleCurrentChange: function (currentPage) {
        this.currentPage = currentPage;
        // console.log(`每页 ${currentPage} 条`);
      },
      handleSizeChange: function (pagesize) {
        this.pagesize = pagesize;
        // console.log(`当前页: ${pagesize}`);
      }
    },
    // 页面加载获取后台页面展示数据
    mounted() {
      this.listTableData()
    },
  }
</script>

<style scoped>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #ee0d2e;
  }

  .el-pagination {
    text-align: center;
  }



  .listdata /deep/.el-table th>.cell {
    text-align: center;
  }

  .listdata /deep/.el-table .cell {
    text-align: center;
  }

  .listdata /deep/ .el-table td,
  .el-table th {
    padding: 10px 0;
  }
</style>